タイトル
グラフのタイトルは、グラフの上部に描画するテキストを定義します。
タイトル構成
タイトル設定はoptions.title名前空間。グラフのタイトルのグローバル オプションは次のように定義されます。Chart.defaults.global.title。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
display |
boolean |
false |
タイトルは表示されていますか？ |
position |
string |
'top' |
タイトルの位置。もっと... |
fontSize |
number |
12 |
フォントサイズ。 |
fontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
タイトルテキストのフォントファミリー。 |
fontColor |
Color |
'#666' |
フォントの色。 |
fontStyle |
string |
'bold' |
フォントのスタイル。 |
padding |
number |
10 |
タイトルテキストの上下に追加するピクセル数。 |
lineHeight |
number|string |
1.2 |
テキストの個々の行の高さ。見るMDN。 |
text |
string|string[] |
'' |
表示するタイトルテキスト。配列として指定した場合、テキストは複数行に表示されます。 |
位置
可能なタイトル位置の値は次のとおりです。
'top''left''bottom''right'
使用例
以下の例では、作成されるチャートで「カスタム チャート タイトル」というタイトルを有効にします。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
title: {
display: true,
text: 'Custom Chart Title'
}
}
});